<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      ref="dwMenuDataGridFormRef"
      :is-tree="true"
      :columns="columns"
      :data-grid-title="dataGridTitle"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :searchFormItems="searchFormItems"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #searchProducerSlot="{ config, formData }">
        <virtual-select
          v-model="formData[config.code]"
          textField="producerName"
          :url="producerUrl"
          :placeholder="config.placeholder"
          :style="{ width: config.width + 'px' }"
          @change="searchProducerChange"
        ></virtual-select>
      </template>
      <template #formSlot>
        <el-descriptions :column="2" border>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">团队名称</div>
            </template>
            <el-form-item prop="teamName">
              <el-input v-model="formData.teamName"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">上级团队</div>
            </template>
            <el-form-item prop="parentId">
              <tree-select :url="treeUrl" v-model="formData.parentId"></tree-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px" :span="4">
            <template #label>
              <div>团队介绍</div>
            </template>
            <div>
              <el-form-item prop="teamMemo">
                <el-input v-model="formData.teamMemo" maxlength="250" placeholder="请输入团队简介信息..." show-word-limit type="textarea" />
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px" :span="4">
            <template #label>
              <div>排序号</div>
            </template>
            <div>
              <el-form-item prop="sortNo" :rules="[]">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { FormItemConfig, IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { ITeam } from './team.d';

defineOptions({
  name: 'SysTeam',
});
const treeUrl = '/admin-api/sys/team/list';
const producerUrl = '/admin-api/sys/producer/list';
const dataGridTitle = '团队列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: ITeam) => {
  if (stateValue === 'add') {
    return '团队信息';
  } else {
    return data.teamName;
  }
};
const dwMenuDataGridFormRef = ref();
const searchProducerChange = () => {
  dwMenuDataGridFormRef.value.loadData();
};

const searchFormItems: FormItemConfig[] = [
  {
    label: '厂商',
    code: 'producerId',
    width: 260,
    componentType: 'slot',
    slotName: 'searchProducerSlot',
    placeholder: '请输入关键字或者拼音首字母进行搜索',
    defaultValue: '9c0fcc83-da1c-40bb-9650-e09b00f0e1c3',
  },
  {
    label: '关键字',
    code: 'keyword',
    width: 260,
    componentType: 'input',
    placeholder: '请输入关键字或者拼音首字母进行搜索',
    defaultValue: '',
  },
];

const formData = ref<ITeam>({
  id: '',
  teamName: '',
  teamMemo: '',
  parentId: '',
  sortNo: 1,
});

const columns = ref<IColumn[]>([
  {
    prop: 'teamName',
    label: '团队名称',
  },

  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/team/#{id}',
  delInfoMsgEmphasize: '#{teamName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/team',
};

const getPageHttpConfig: IGetPageHttpConfig<ITeam> = {
  url: '/admin-api/sys/team/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<ITeam> = {
  url: '/admin-api/sys/team/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<ITeam> = {
  url: '/admin-api/sys/team',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<ITeam> = {
  url: '/admin-api/sys/team',
};
</script>
